<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #pageDetail {
        background: #fff;
        overflow: auto;
        color: #666;
    }

    .msg-tip {
        margin-left: 30px;
        color: #999;
    }

    .select-goods {
        width: 146px;
        height: 50px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        margin-right: 10px;
        position: relative;
        margin-bottom: 10px;
    }

    .select-goods-selected {
        border-color: #7438D5;
    }

    .select-goods-img {
        width: 48px;
        height: 48px;
        border-radius: 4px;
    }

    .select-goods div {
        padding: 0 8px;
        line-height: 14px;
        -webkit-line-clamp: 2;
        font-size: 12px;
    }

    .delete-goods {
        position: absolute;
        width: 16px;
        height: 16px;
        top: -8px;
        right: -8px;

    }

    .label-auto {
        width: 16px;
        height: 16px;
    }

    .modify-text {
        margin-right: 14px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="pageDetail" v-cloak>
    <el-form :model="detailData" :rules="rules" ref="detailData" label-width="108px" class="detail-form">


        <el-form-item label="发放说明：">
            <div class="display-flex">
                   此手动发放不受用户领取限制，优惠券领取时间以及库存限制
            </div>
        </el-form-item>


        <el-form-item label="每人张数：">
            <div class="display-flex">
                <el-input v-positive-integer type="number" v-model="detailData.limit" style="width:170px;" placeholder="请输入每人发放张数">
                    <template slot="append">张</template>
                </el-input>
            </div>
        </el-form-item>


        <el-form-item label="发放方式：" prop="goods_type">
            <div>
                <el-radio-group v-model="detailData.fafang_type">
                    <el-radio label="all">全部用户</el-radio>
                    <el-radio label="part">指定用户</el-radio>
                </el-radio-group>

                <div class="display-flex" v-if="detailData.fafang_type=='part'">

                        <div class="user-container">
                            <el-select style="position: relative;" v-model="detailData.employees_user_ids" multiple filterable
                                       size="medium" placeholder="" :filter-method="dataFilter" @visible-change="changeUser">
                                <el-option v-for="item in aboutUserOptions" v-if="item" :key="item.id"
                                           :label="item.nickname" :value="item.id">
                                    <div class="display-flex" style="justify-content: space-around;">
                                        <span>{{ item.id }}</span>
                                        <div style="width: 24px;">
                                            <img v-if="item.avatar" style="width:24px;height:24px;border-radius:50%;"
                                                 :src="Fast.api.cdnurl(item.avatar)">
                                        </div>
                                        <div style="width: 80px;">{{ item.nickname }}</div>
                                        <div style="width: 90px;">
                                            <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>
                                            <div style="width: 90px;text-align: center;" v-else>-</div>
                                        </div>
                                    </div>
                                </el-option>
                                <div class="text-center"
                                     style="position: sticky;background: #fff;height:28px;top:0;z-index:1">
                                    <div class="text-normal display-flex" style="justify-content: center;">
                                        <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentPage"
                                                       :total="totalPage" layout="total, sizes, prev, pager,next, jumper"
                                                       pager-count="5" @size-change.stop="pageSizeChange"
                                                       @current-change="pageCurrentChange" />
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-select>
                            <div class="dialog-footer display-flex">
                                <div @click="submitas" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
                                <div @click="submitas('yes','detailData')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
                            </div>
                        </div>

                    </div>
                </div>
            <div class="display-flex" v-if="detailData.fafang_type=='all'">

                <div class="dialog-footer display-flex">
                    <div @click="submitas" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
                    <div @click="submitas('yes','detailData')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
                </div>

            </div>
            </div>
            </div>
        </el-form-item>
    </el-form>

</div>